iT邦幫忙

2025 iThome 鐵人賽

DAY 2
3
生成式 AI

30 天 Vibe Coding:全端 × 機器學習的實作挑戰系列 第 2

Day 2|30 天 Vibe Coding:要吃飯哪能沒有碗

  • 分享至 

  • xImage
  •  

昨天豪氣萬千地宣布要挑戰 30 天 Vibe Coding,結果打開電腦才發現環境還沒裝
俗話說:「工欲善其事,必先利其器」
要是環境沒搞好,明天開始記帳 App 的時候,可能會直接卡在「npm 裝不起來」然後提早領便當


今天要裝的東西

Cursor:AI 加持的編輯器,看似是寫程式的環境,但其實我只會用右邊的對話框
Node.js:跑 React 要用的東東
Firebase CLI:之後 Firestore(資料庫) / 部署都靠它
GitHub Repo:紀錄每天的屎山程式碼,就算把程式碼搞爆還有備份可救回


安裝過程

  1. 安裝 Cursor
    到 Cursor 官網 下載安裝檔。
    安裝完成後打開,直接用 GitHub 或 Google 帳號登入即可。Pro的試用期只有兩週,如果想當免費仔可以每兩週切換一個Google帳號!不過每個月才20美其實也不算太貴
  2. 安裝 Node.js
    到 Node.js 官網 下載 LTS 版本(穩定)
    我自己裝的是 v20.19.0(屬於 Current 版),其實也能用,不過官方還是建議用 LTS,長期比較穩定
    安裝完成後,打開終端機輸入:
node -v
npm -v

有顯示版本號就代表成功
3. 安裝 Firebase CLI
在終端機輸入:

npm install -g firebase-tools

安裝完畢後登入 Firebase:

firebase login

會跳到瀏覽器,選擇 Google 帳號登入。登入成功後終端機會顯示 OK。
4. 建立 GitHub Repo (CUI 版)
先到 GitHub 建一個新的 Repository。
在本地專案資料夾裡輸入:

git init
git remote add origin https://github.com/你的帳號/你的repo.git
git add .
git commit -m "initial commit"
git push -u origin main

push 成功之後,就能在 GitHub 上看到今天的紀錄。
5. 建立 GitHub Repo(GUI 版)
登入 GitHub,右上角點 「+」 → New repository
填寫 repo 名稱(例如 expense-tracker),選擇私人Private
勾選 Add a README file,這樣就會自動產生一個可以直接 clone 的 repo
建立完成後,點擊綠色的 Code 按鈕,複製 HTTPS 或 SSH 的連結
在本機開啟 Cursor/VSCode,選 Clone Repository,貼上剛剛的連結
成功後,你的專案就會直接同步到 GitHub,之後在 VSCode/Cursor 用 Commit & Push 就能更新
如果不想用 VSCode 內建 Git,也可以安裝 GitHub Desktop:
開啟 GitHub Desktop → File → Clone repository
選擇剛剛建立的 repo
以後只要 Commit → Push origin 就能把程式碼更新上去,介面化操作更直覺


今日驗收 ✅

  1. npm run dev 能跑起一個空專案
  2. Firebase CLI 登入成功(不然 Day 4 串 Firestore會哭)
  3. Repo 成功 push,能留下 commit 記錄

明日預告
Day 3 正式開始做第一個專案 —— 記帳 App
先做個 MVP,能輸入一筆消費,按下去出現在列表上。看看明天能不能至少知道我的錢錢花去哪了

就這樣,Day 2 完美落幕/images/emoticon/emoticon07.gif


上一篇
Day 1|30 天 Vibe Coding:能不能撐下去全看 AI 給不給力
下一篇
Day 3|30 天 Vibe Coding:記帳 App MVP
系列文
30 天 Vibe Coding:全端 × 機器學習的實作挑戰3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言